import { useEffect } from "react";
import { useReactive } from "ahooks";
import { Row, Col } from "antd";
import { Card as SemiCard, List, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconEdit } from "@douyinfe/semi-icons";
import { useModel } from "umi";

import useHelperOrganizationApplication from "../../helper/useHelperOrganizationApplication";

import useAllCategory from "../../hooks/application/organization/useAllCategory";
import useCategoryApplications from "../../hooks/application/organization/useCategoryApplications";

import ApplicationDetail from "../../components/organization_application/Detail";

const OrganizationApplicationsByCategory = () => {
    const { windowInnerHeight } = useModel("global");
    const { openEditApplicationModal } = useHelperOrganizationApplication();

    const { loading: categoryLoading, categories, loadAllCategories } = useAllCategory();
    const { loading: appLoading, applications, loadCategoryApplications } = useCategoryApplications();

    const state = useReactive({
        selectedCategory: {},
        selectedApplication: {},
    });

    useEffect(() => {
        let selectedCategory = categories.find((item) => item.acName === state.selectedCategory?.acName);
        !selectedCategory && categories.length > 0 && (selectedCategory = categories[0]);
        state.selectedCategory = selectedCategory || {};
    }, [categories]);

    useEffect(() => {
        if (state.selectedCategory?.acName) {
            loadCategoryApplications(state.selectedCategory.acName);
        }
    }, [state.selectedCategory]);

    useEffect(() => {
        let selectedApplication = applications.find((item) => item.appUuid === state.selectedApplication?.appUuid);
        !selectedApplication && applications.length > 0 && (selectedApplication = applications[0]);
        state.selectedApplication = selectedApplication || {};
    }, [applications]);

    const cardBodyHeight = windowInnerHeight - 90 - 53 - 20;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={4}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 16 }}>应用分类</span>}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconRefresh />} onClick={loadAllCategories}></Button>
                        </ButtonGroup>
                    }
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                >
                    <List
                        loading={categoryLoading}
                        dataSource={categories}
                        renderItem={(item, index) => (
                            <List.Item
                                key={index}
                                className={`list-item ${state.selectedCategory?.acName === item?.acName ? "list-selected-item" : ""}`}
                                main={<div title={item?.acDesc}>{item?.acName || "-"}</div>}
                                onClick={() => (state.selectedCategory = item)}
                            ></List.Item>
                        )}
                    />
                </SemiCard>
            </Col>
            <Col span={4}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 16 }}>应用列表</span>}
                    headerExtraContent={
                        <ButtonGroup>
                            {state.selectedCategory?.acName && <Button icon={<IconRefresh />} onClick={() => loadCategoryApplications(state.selectedCategory.acName)}></Button>}
                        </ButtonGroup>
                    }
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                >
                    <List
                        loading={appLoading}
                        dataSource={applications}
                        renderItem={(item, index) => (
                            <List.Item
                                key={index}
                                className={`list-item ${state.selectedApplication?.appUuid === item?.appUuid ? "list-selected-item" : ""}`}
                                main={<div title={item.appDesc}>{item?.appName || "-"}</div>}
                                onClick={() => (state.selectedApplication = item)}
                            ></List.Item>
                        )}
                    />
                </SemiCard>
            </Col>
            <Col span={16}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 16 }}>应用信息 - {state.selectedApplication?.appName}</span>}
                    headerExtraContent={
                        <ButtonGroup>
                            {state.selectedApplication?.appUuid && (
                                <Button
                                    icon={<IconEdit />}
                                    onClick={() => openEditApplicationModal(state.selectedApplication, () => loadCategoryApplications(state.selectedCategory.acName))}
                                >
                                    编辑应用信息
                                </Button>
                            )}
                        </ButtonGroup>
                    }
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 10, height: cardBodyHeight, overflow: "auto" }}
                >
                    {state.selectedApplication?.appUuid && (
                        <ApplicationDetail item={state.selectedApplication || {}} reloadData={() => loadCategoryApplications(state.selectedCategory.acName)} />
                    )}
                </SemiCard>
            </Col>
        </Row>
    );
};

export default OrganizationApplicationsByCategory;
